import classnames from 'classnames'

import Icon from '@/component/icon'
import styles from './index.module.scss'
import { useinitstate } from '@/hooks'
import {
  addChannel,
  delChannel,
  getAllChanenlList,
} from '@/store/actions/channels'
import { useState } from 'react'
import { changeActiveId } from '@/store/modules/channels'
import { useDispatch } from 'react-redux'
import { Channel } from '@/types/data'
import { AppDispatch } from '@/store'
import { Toast } from 'antd-mobile'

type Props = {
  onClose: (show: boolean) => void
}

const Channels = ({ onClose }: Props) => {
  const dis = useDispatch<AppDispatch>()
  const { channels, restChannels, activeId } = useinitstate(
    getAllChanenlList,
    'channels'
  )
  const [edit, setEdit] = useState(false)
  // 删除
  const changeChannel = (channel: Channel) => {
    if (edit) {
      if (
        channel.id === 0 ||
        channel.id === +activeId ||
        channels.length <= 4
      ) {
        return Toast.show({
          content: '不满足删除条件',
        })
      }

      dis(delChannel(channel))
      Toast.show({
        content: '删除成功',
      })
    } else {
      dis(changeActiveId(channel.id))
      onClose(false)
    }
  }
  // 添加
  const addChannelList = (channel: Channel) => {
    console.log(channel)
    dis(addChannel(channel))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon
          iconName="iconbtn_channel_close"
          onClick={() => {
            onClose(false)
          }}
        />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: edit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span
              className="channel-item-edit"
              onClick={() => {
                setEdit(!edit)
              }}>
              {edit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {channels.map((item) => (
              <span
                key={item.id}
                onClick={() => changeChannel(item)}
                className={classnames('channel-list-item', {
                  selected: item.id === activeId,
                })}>
                {item.name}
                <Icon iconName="iconbtn_tag_close" />
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {restChannels.map((item) => (
              <span
                onClick={() => addChannelList(item)}
                key={item.id}
                className="channel-list-item">
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
